<template>
    <div class="empty">
        <el-tree :data="models" @node-click="handleNodeClick"></el-tree>
    </div>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')

export default {
    components: {
        //empty
    },
    props: {
        value: [Array, Object]
    },
    data() {
        return {

        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        ...mapState(['main']),
        models: function(argument) {
            let models = this.value;
            let data = [];
            //循环遍历设置
            for (let i in models) {
                let item = models[i];
                let label = {
                    label: item.title,
                    children: []
                }
                let fields = item.fields;
                for (let _i in fields) {
                    let _item = fields[_i];
                    let _label = {
                        label: _item.title
                    }
                    label.children.push(_label);
                }
                data.push(label);
            }

            return data;
        }
    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {

    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        handleNodeClick() {

        }
    }
}
</script>
<style type="text/css" lang="scss">
</style>